<template>
  <div class="bottom_nav_container">
    <van-tabbar safe-area-inset-bottom v-model="activeNav" active-color="#FC8434" inactive-color="#D4D6DB">
      <van-tabbar-item 
        v-for="(item, index) in tabBarList" 
        :key="index"
        :name="item.name"
        :to="item.name">
        <span>{{ item.label }}</span>
        <span
          slot="icon"
          :class="item.icon"
        ></span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import {
  createNamespacedHelpers,
  mapMutations
} from "vuex";
let {
  mapState,
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

import axios from "axios";
export default {
  name: "bottomNav",
  data() {
    return {
      jwtAuth: {},
      activeNav: 'workBench',
      tabBarList: [
        
      ]
    };

  },
  watch: {
    $route(newVal, oldVal) {
      console.log(newVal)
      this.activeNav = newVal.name;
      // console.log(this.activeNav)
    }
  },
  created() {
    this.activeNav = this.$route.name;
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    
    console.log(this.tabBarList)
    this.initMenuData();
  },
  mounted() {
    // console.log(this.menuList);
    // console.log(this.$route.path)
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initMenuData() {
      this.formGet({
        API: 'queryMenuListMobile',
        data: {
          menuCode: 'studentManagement',
          accountId: this.jwtAuth.accountId
        }
      }).then(res => {
        let obj =  {
          label: '工作台',
          name: 'workBench',
          icon: 'icon-home',
        }
        
        this.tabBarList = res.menuList[0].children;
        this.tabBarList.unshift(obj)
        // console.log(res.menuList[0]);
      })
    },

    selectChange(key) {
      this.activeIndex = key;
      sessionStorage.setItem("menuKey", key);
    },

    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },

    toRouter(item) {
      if(item.name) {
        this.updateInfo(["activeMenuItem", item]);
      }
      this.$router.push({
        name: item.name
      })
    },
    handleOpen(key, keyPath) {
      this.activeIndex = key;
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  },
  computed: {
    // ...mapState([
    //   "menuList",
    // ])
  },
  destroyed() {
    sessionStorage.removeItem("menuKey");
  },
  // props: ["tabBarList"]
};
</script>

<style>
.bottom_nav_container .van-tabbar {
  height: 1.306667rem !important;
  margin-bottom: -1px;
}
</style>
<style scoped>
.bottom_nav_container {
  height: 1.306667rem;
  background: #303133;
}

</style>
